<template>
  <div class="v-property-banner g-jc-sb">
    <div
      :class="{ _disable: disabled }"
      style="width: 100%; display: flex; justify-content: space-between"
    >
      <span class="g-pd-l-8">{{ $t("查看") }}</span>
      <div
        v-if="selected && !disabled"
        class="g-pd-r-4 img-btn"
        @click="openBanner"
      >
        <img
          src="statics/icons/app/iconmore.png"
          class="g-pointer"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { modelDetail } from "@/modules/model/modals/modelDetail";
import { PropertyRow } from "../../types";
import { AttributeTabKey } from "@/constants/Enums";
import { MetaclassType } from "@/constants/MetaclassType";
import { inject, Ref, computed } from "vue";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  encrypted?: boolean;
  editDivHeight?: number;
  maxlength?: number;
}>();
const disabled = computed(() => {
  return props.row.readonly || isModelDisabled?.value;
});
async function openBanner() {
  const projectId = app.activeProject?.id;
  if (!projectId) {
    return;
  }
  const query = {
    projectId,
    modelId: props.row.modelId,
    metaclass: MetaclassType.Property,
    activeKey: AttributeTabKey.Tags
  };
  await modelDetail.popup(query);
}
</script>
<style lang="scss" scoped>
.v-property-banner {
  ._disable {
    background-color: #f5f7fa;
    color: #a8abb2 !important;
    cursor: not-allowed !important;
  }
}
</style>
